<template>
  <div class="Declare-Body">
    <mu-appbar style="width: 100%;" color="white" text-color="primary" z-depth="0">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      申报
      <mu-button style="font-size: 20px;width: 80px" icon slot="right" @click="submit">
        提交
      </mu-button>
    </mu-appbar>
    <div class="input-class">
      <mu-form ref="form" :model="validateForm">
        <mu-list>
          <mu-sub-header>个人信息</mu-sub-header>
          <mu-paper :z-depth="0">
            <mu-list-item>
              <mu-list-item-action class="item-action">
                <h4>真实姓名：</h4>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-text-field full-width v-model="validateForm.name" solo placeholder="请输入姓名"
                ></mu-text-field>
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider class="divider"></mu-divider>
            <mu-list-item>
              <mu-list-item-action class="item-action">
                <h4>申报身份：</h4>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-select v-model="validateForm.identityType" solo full-width>
                  <mu-option v-for="(option,index) in options" :key="index" :label="option.label"
                             :value="option.value"></mu-option>
                </mu-select>
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider class="divider"></mu-divider>
            <mu-list-item>
              <mu-list-item-action class="item-action">
                <h4>联系方式：</h4>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-text-field type="number" v-model="validateForm.phone" placeholder="请输入联系方式" solo
                               full-width></mu-text-field>
              </mu-list-item-content>
            </mu-list-item>
          </mu-paper>
          <mu-divider class="divider"></mu-divider>
          <mu-paper :z-depth="0">
            <mu-list-item>
              <mu-list-item-action class="item-action">
                <h4>邮箱：</h4>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-text-field v-model="validateForm.email" placeholder="请输入邮箱" solo full-width></mu-text-field>
              </mu-list-item-content>
            </mu-list-item>
          </mu-paper>
        </mu-list>
        <mu-list>
          <mu-sub-header>申报信息<a href="#" @click="openFullScreenDialog1"
                                class="more">申报声明</a></mu-sub-header>
          <mu-paper :z-depth="0">
            <mu-list-item>
              <mu-list-item-action class="item-action">
                <h4>申报金额：</h4>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-text-field v-model="validateForm.valuationTotal" solo full-width
                               placeholder="请输入预估损失金额"></mu-text-field>
              </mu-list-item-content>
            </mu-list-item>
          </mu-paper>
          <mu-divider class="divider"></mu-divider>
          <mu-paper :z-depth="0">
            <mu-list-item>
              <mu-list-item-action class="item-action">
                <h4>申报说明：</h4>
              </mu-list-item-action>
            </mu-list-item>
            <mu-form-item style="padding:0 1.5rem 0 1.5rem;" prop="body">
              <mu-text-field :max-length="400" v-model="validateForm.reason" full-width placeholder="请输入不少于10个字的描述"
                             multi-line :rows="5"
                             :rows-max="6" solo></mu-text-field>
            </mu-form-item>
          </mu-paper>
        </mu-list>
        <mu-list>
          <mu-sub-header>图片上传【股票对账单({{images.length}}/{{max}})】<a href="#" @click="openFullScreenDialog"
                                                                  class="more">如何查对账单?</a>
          </mu-sub-header>
          <mu-paper :z-depth="0">
            <mu-form-item style="padding:0" prop="body">
              <uploader
                title=""
                :enableCompress="false"
                :files=images
                :url="uploadUrl"
                :multiple="true"
                :limit="max"
                :limitShow="false"
                @onChange="onChange"
                @onCancel="onCancel"
                @onSuccess="onSuccess"
                @onError="onError"
                @onRemove="onRemove"
              >
              </uploader>
            </mu-form-item>
          </mu-paper>
        </mu-list>
      </mu-form>
      <mu-row style="text-align: center;color: #9e9e9e">
        <p>若在申报中遇到任何问题可联系平台客服，客服电话为：0571--89180115</p>
      </mu-row>
      <mu-dialog transition="slide-bottom" scrollable :padding="0" fullscreen :open.sync="openFullScreen1">
        <mu-appbar :z-depth="0" color="primary" title="申报声明">
          <mu-button slot="left" icon @click="closeFullScreenDialog1">
            <mu-icon value="close"></mu-icon>
          </mu-button>
        </mu-appbar>
        <div style="padding: 1.5rem;" v-html="protocol.content">
        </div>
      </mu-dialog>
      <mu-dialog transition="slide-bottom" scrollable :padding="0" fullscreen :open.sync="openFullScreen">
        <mu-appbar :z-depth="0" color="primary" title="维权指南">
          <mu-button slot="left" icon @click="closeFullScreenDialog">
            <mu-icon value="close"></mu-icon>
          </mu-button>
        </mu-appbar>
        <div style="padding: 1.5rem;">
          <p>问：如何查询自己的对账单？</p>
          <p>答：去当地的证券公司营业厅进行查询打印。如图：</p>
          <p><img width="100%"
                  src="https://u.thsi.cn/fileupload/data/Sns/2018/11d53e2d3b44d627ceb255de3e62b5bc_536_442.png"/></p>
          <p>问：打印对账单有什么要求？</p>
          <p>打印区间要求：从第一次买入该股票至现在为止（如果第一笔是在买入区间内发生的，请打印从买入区间开始到现在为止）</p>
          <h4>要求：</h4>
          <p>1、证券公司营业部出具，在每页盖章（不要挡到数据）；</p>
          <p>2、内容必须写明对账起止时间、姓名、账号，以及每笔交易的成交时间、股数、价格、金额、交易后持股余量；</p>
          <p>3、如有两个账户转入转出该股票的情况，两个账户的交易记录都要提供；</p>
          <p>4、必须用标准A4纸单面打印；</p>
          <p>5、尽可能选择单只股票交易记录，如果实在做不到，则选择全部股票的。</p>
          <p>问：对账单上传后，如何查看进度</p>
          <p>答：律师计算您的索赔金额后，会给您发送短信，请在收到短信后，可在我的申报里面查看此次申报的进度，并且关注案件推送给您的公告提示您线下寄相关资料进行维权诉讼，同时也会发短信提示您。</p>
        </div>
      </mu-dialog>
    </div>
  </div>
</template>

<script>
  import headerBack from '@/components/headerBack';
  import Uploader from '@/components/uploader';

  export default {
    data() {
      return {
        protocol: {
          id: '',
          title: '申报说明',
          content: this.PROTOCOL_CONTENT
        },
        openFullScreen1: false,
        openFullScreen: false,
        max: 30,
        images: [],
        uploadUrl: this.baseUrl + "/file/uploader",
        params: {},
        title: this.$route.query.title ? this.$route.query.title : '申报',
        options: [{
          value: 1,
          label: '个人'
        }, {
          value: 2,
          label: '公司（机构）'
        }, {
          value: 3,
          label: '行政机关'
        }],
        forget: false,
        validateForm: {
          caseId: this.$route.query.caseId ? this.$route.query.caseId : '',
          name: '',
          phone: '',
          email: '',
          valuationTotal: '',
          reason: '',
          identityType: 1,
          relevantFiles: ''
        }
      }
    },
    components: {
      Uploader,
      headerBack
    },
    created() {
    },
    watch: {},
    mounted() {
      this.getProtocol();
    },
    methods: {
      getProtocol() {
        const _self = this;
        let params = {
          id: this.$route.query.caseId
        };
        this.postRequest("/protocol/getProtocol", params).then(res => {
          if (res.code === 200 && res.data) {
            _self.protocol = res.data;
          }
        });
      },
      openFullScreenDialog1() {
        this.openFullScreen1 = true;
      },
      closeFullScreenDialog1() {
        this.openFullScreen1 = false;
      },
      openFullScreenDialog() {
        this.openFullScreen = true;
      },
      closeFullScreenDialog() {
        this.openFullScreen = false;
      },
      toLogin() {
        this.forget = false;
      },
      toForget() {
        this.forget = true;
      },
      submit() {
        if (!this.validateForm.name) {
          this.$toast.warning("真实姓名不能为空！");
          return;
        }
        if (!this.validateForm.phone) {
          this.$toast.warning("联系方式不能为空！");
          return;
        }
        if (!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.validateForm.phone)) {
          this.$toast.info("手机号格式不正确");
        } else if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.validateForm.email)) {
          this.$toast.info("邮箱格式不正确")
        } else {
          if (this.images && this.images.length > 0) {
            this.validateForm.relevantFiles = this.images.join(",");
          }
          this.postRequest("/declare/shares", this.validateForm).then(res => {
            if (res.code === 200) {
              this.$toast.info("申报成功！");
              this.$router.push({name: "declareList"});
            }
          });
        }
      },
      clear() {
        this.$refs.form.clear();
        this.validateForm = {
          username: '',
          password: ''
        };
      },
      onRemove(e) {
        this.images.splice(this.images.indexOf(e), 1);
      },
      onChange(fileList) {
      },
      onCancel() {
      },
      onSuccess(res) {
        this.images.push(res);
      },
      onError(res) {
      }
    }
  }
</script>
<style scoped lang="less">
  .Declare-Body {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 99;
    background-color: #f9f9f9;
    overflow: hidden;
  }

  .input-class {
    height: 93%;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .header {
    margin-left: 1rem;
  }

  .text-field {
    width: 100%;
  }

  .paper {
    padding: 0.5rem;
  }

  .right-title {
    text-align: right;
    margin-right: -2.5rem;
    color: #929292
  }

  .item-action {
    width: 30%
  }

  .divider {
    width: 92%;
    margin: 0 auto;
    /*color: #f9f9f9*/
  }

  .more {
    float: right;
    margin-right: 1.3rem
  }
</style>
